<template>
  <el-dialog
    title="佣金来源详情"
    :visible.sync="visible"
    :before-close="handleClose"
    width="40%"
  >
    <el-form>
      <el-form-item v-if="val.type == 1">
        分销员：{{ val.nick_name }}; {{ val.distribute_name }}; 下级人数：{{
          totals
        }}
        人
      </el-form-item>
      <el-form-item v-else>
        员工：{{ val.nick_name }}; 所属门店：{{ val.store }}; 下级人数：{{
          totals
        }}
        人
      </el-form-item>
      <el-form-item label="订单起止时间">
        <el-date-picker
          v-model="time"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          @change="getList"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <Table :data="listData">
          <el-table-column
            label="下级名称"
            align="center"
            property="nick_name"
          ></el-table-column>
          <el-table-column
            label="分销商品订单号"
            align="center"
            property="pay_order"
          ></el-table-column>
          <el-table-column
            label="订单销售价格（元）"
            align="center"
            property="need_pay"
          ></el-table-column>
          <el-table-column
            label="所得佣金"
            align="center"
            property="hire_money"
          ></el-table-column>
        </Table>
        <el-pagination
          style="text-align: center;margin-top: 10px;"
          :page-size="10"
          layout="prev, pager, next"
          :total="totals"
          @current-change="changes"
        >
        </el-pagination>
      </el-form-item>
    </el-form>

    <!-- <span slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary"
                 @click="handleSumbit">确 定</el-button>
    </span> -->
  </el-dialog>
</template>

<script>
import { COMMISSIONDETAIL } from "../../service";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    val: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      listData: [],
      pages: 1,
      totals: 0,
      time: []
    };
  },
  watch: {
    visible(v) {
      if (v) {
        this.getList();
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit("outDialog");
    },
    changes(page) {
      this.pages = page;
      this.getList();
    },
    async getList() {
      await COMMISSIONDETAIL({
        member_id: this.val.member_id,
        stime: this.time.length > 0 ? this.time[0] : "",
        etime: this.time.length > 0 ? this.time[1] : ""
      }).then(({ code, data }) => {
        if (code === 200) {
          this.totals = data.count;
          this.listData = data.list;
        } else {
          this.totals = 0;
          this.listData = [];
        }
      });
    }
  }
};
</script>
